<template>
  <el-dialog
    title="区域详情"
    :visible="isShow"
    :close-on-click-modal="false"
    @close="closeDialog"
  >
    <el-form>
      <el-form-item label="区域名称：" label-width="140px">
        <span>{{ currentName }}</span>
      </el-form-item>
      <el-form-item label="包含点位：" label-width="140px">
        <table-component
          :table-cols="tableCols"
          class="pointTable"
          :is-loading="isLoading"
          :table-data="tableData"
        />
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import TableComponent from '@/views/point/components/TableComponent'
import { getNodeApi } from '@/api/pointManage/point'
export default {
  name: 'QuyuDetailDialog',
  components: {
    TableComponent
  },
  data () {
    return {
      isShow: false,
      tableCols: [
        { label: '序号', width: '100px', type: 'index' },
        { label: '点位名称', prop: 'name' },
        { label: '设备数量', prop: 'vmCount' }
      ],
      pointTableParamsData: {
        pageIndex: 1,
        pageSize: 10
      },
      isLoading: false,
      tableData: [],
      currentName: ''
    }
  },
  methods: {
    async openDialog (row) {
      this.currentName = row.name
      this.isShow = true
      this.isLoading = true
      const res = await getNodeApi({
        ...this.pointTableParamsData,
        regionId: row.id
      })
      const { currentPageRecords } = res
      this.tableData = currentPageRecords
      this.isLoading = false
    },
    closeDialog () {
      this.isShow = false
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  width: 630px;
  border-radius: 10px;
}
::v-deep .el-form-item__label {
  font-weight: 500;
}
::v-deep .pointTable {
  .el-table__header {
    line-height: 1;
  }
}
</style>
